/*********************************************************************/
/*  ____           _    _                                            */
/* |  _ \ ___ _ __| | _(_)_ __  ___                                  */
/* | |_) / _ \ '__| |/ / | '_ \/ __|                                 */
/* |  __/  __/ |  |   <| | | | \__ \                                 */
/* |_|   \___|_|  |_|\_\_|_| |_|___/.LESS                            */
/* Design & Develop the Web, Faster.                                 */
/*                                                                   */
/*********************************************************************/
/*                                                                   */
/*  Developed by:        Carlos Elias                                */
/*                       Rodrigo Fuentealba                          */
/*                       Alvaro Veliz                                */
/*                                                                   */
/*  License:             MIT                                         */
/*                                                                   */
/*  Based on:            Tyler Tate "The 1Kb CSS Grid"               */
/*                                                                   */
/*********************************************************************/
.grid(@rowwidth: 16) {
  width: @rowwidth * (@width / @columns) - (2 * @margin);
}
.grid-1 {
  .grid(1);
}
.grid-2 {
  .grid(2);
}
.grid-3 {
  .grid(3);
}
.grid-4 {
  .grid(4);
}
.grid-5 {
  .grid(5);
}
.grid-6 {
  .grid(6);
}
.grid-7 {
  .grid(7);
}
.grid-8 {
  .grid(8);
}
.grid-9 {
  .grid(9);
}
.grid-10 {
  .grid(10);
}
.grid-11 {
  .grid(11);
}
.grid-12 {
  .grid(12);
}
.grid-13 {
  .grid(13);
}
.grid-14 {
  .grid(14);
}
.grid-15 {
  .grid(15);
}
.grid-16 {
  .grid(16);
}
.grid-17 {
  .grid(17);
}
.grid-18 {
  .grid(18);
}
.grid-19 {
  .grid(19);
}
.grid-20 {
  .grid(20);
}
.grid-21 {
  .grid(21);
}
.grid-22 {
  .grid(22);
}
.grid-23 {
  .grid(23);
}
.grid-24 {
  .grid(24);
}
.grid-25 {
  .grid(25);
}
.grid-26 {
  .grid(26);
}
.grid-27 {
  .grid(27);
}
.grid-28 {
  .grid(28);
}
.grid-29 {
  .grid(29);
}
.grid-30 {
  .grid(30);
}
.grid-31 {
  .grid(31);
}
.grid-32 {
  .grid(32);
}
.grid-33 {
  .grid(33);
}
.grid-34 {
  .grid(34);
}
.grid-35 {
  .grid(35);
}
.grid-36 {
  .grid(36);
}
/*
.column {
  
}
.row {
  
  .row {
    margin: 0 - @margin;
    width: auto;
    
}
*/

.column {
  display: inline;
  float: left;
  margin: 0 @margin;
  overflow: hidden;
}
.row {
  width: @width;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  .row {
    display: inline-block;
  }
}

////////////////////
// SEMANTIC GRID //
//////////////////

// Defaults which you can freely override
@column-width: 1 * (@width / @columns) - (2 * @margin);
@gutter-width: @margin;

//(50*16) + (10*16) = 960

// 1 * (960 / 16) - (2 * 10) = 40

@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;

/*
body {
  width: 100%;
  float: left;
}

.row(@columns:@columns) {
  display: inline-block;
  overflow: hidden;
  width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
  margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
}
*/
.column-grid(@x,@columns:@columns) {
  display: inline;
  float: left;
  overflow: hidden;
  width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
  margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);
}